<template>
  <el-dialog
    title="适用组织"
    :visible.sync="dialogVisible"
    width="600px"
    :before-close="handleClose"
    :close-on-click-modal="false"
  >
    <div class="dialog">
      <div class="dialog-section">
        <div class="header-check">
          <el-checkbox
            :indeterminate="isIndeterminate1"
            v-model="allCheckAll"
            @change="handleCheckAllChange1"
            >所有组织</el-checkbox
          >
        </div>
        <div class="main-check">
          <el-checkbox-group
            v-model="allOrganizationsCheck"
            @change="handleCheckedCitiesChange1"
          >
            <el-checkbox
              v-for="item in allOrganizations"
              :label="item"
              :key="item.deptId"
            >
              <span class="title" :title="item.deptName">{{ item.name }}</span>
            </el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
      <div class="dialog-center">
        <el-button size="small" type="primary" @click="add">加入&gt;</el-button>
        <el-button size="small" @click="remove">&lt;移除</el-button>
      </div>
      <div class="dialog-section">
        <div class="header-check">
          <el-checkbox
            :indeterminate="isIndeterminate2"
            v-model="checkAll"
            @change="handleCheckAllChange2"
            >已选组织</el-checkbox
          >
        </div>
        <div class="main-check">
          <el-checkbox-group
            v-model="organizationsCheck"
            @change="handleCheckedCitiesChange2"
          >
            <el-checkbox
              v-for="item in organizations"
              :label="item"
              :key="item.deptId"
            >
              <span class="title" :title="item.deptName">{{ item.name }}</span>
            </el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" type="primary" @click="addDeptInfo"
        >提交</el-button
      >
      <el-button size="small" @click="(dialogVisible = false), updateKey()"
        >取 消</el-button
      >
    </span>
  </el-dialog>
</template>
<script>
import request from "@/utils/request";
import Qs from "qs";
export default {
  props: {
    headTitle: {}
  },
  data() {
    return {
      dialogVisible: false,
      dateRange: "",
      isIndeterminate1: true,
      isIndeterminate2: true,
      allOrganizations: [], //所有组织数据
      allOrganizationsCheck: [], //所有组织选中
      allCheckAll: false, //所有组织全选

      organizations: [], //已选组织数据
      organizationsCheck: [], //已选组织选中
      checkAll: false, //已选组织全选
      getInfoData: {},
      category: "",
      val: {},
      ableCurrntAccount: []
    };
  },
  methods: {
    handleCheckAllChange1(val) {
      console.log(val);
      this.allOrganizationsCheck = val ? this.allOrganizations : [];
      this.isIndeterminate1 = false;
    },
    handleCheckedCitiesChange1(value) {
      let checkedCount = value.length;
      this.allCheckAll = checkedCount === this.allOrganizations.length;
      this.isIndeterminate1 =
        checkedCount > 0 && checkedCount < this.allOrganizations.length;
    },
    handleCheckAllChange2(val) {
      console.log(val);
      this.organizationsCheck = val ? this.organizations : [];
      this.isIndeterminate2 = false;
    },
    cleanCheck() {
      this.organizationsCheck = [];
      this.allOrganizationsCheck = [];
    },
    handleCheckedCitiesChange2(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.organizations.length;
      this.isIndeterminate2 =
        checkedCount > 0 && checkedCount < this.organizations.length;
    },
    add() {
      this.organizations = [
        ...this.allOrganizationsCheck,
        ...this.organizations
      ];
      this.allOrganizations = this.allOrganizations.filter(item => {
        let flag = true;
        this.organizations.forEach(el => {
          if (JSON.stringify(item) === JSON.stringify(el)) {
            flag = false;
          }
        });
        return flag;
      });
      this.cleanCheck();
    },
    remove() {
      this.allOrganizations = [
        ...this.organizationsCheck,
        ...this.allOrganizations
      ];
      console.log(this.organizationsCheck);
      this.organizations = this.organizations.filter(item => {
        let flag = true;
        this.allOrganizations.forEach(el => {
          if (JSON.stringify(item) === JSON.stringify(el)) {
            flag = false;
          }
        });
        return flag;
      });
      this.cleanCheck();
    },
    addDeptInfo() {
      console.log(this.getInfoData);
      console.log(this.organizations);
      let infos = {
        accountTagId: [],
        deptId: this.val.val.deptId,
      };
      this.organizations.forEach(item => {
        infos.accountTagId.push(`${String(item.id||item.accountTagId)}|${String(item.parentId||item.pId)}`);
      });
      infos.accountTagId = infos.accountTagId;
      console.log(infos)
      request({
        url: "/system/card/add",
        method: "post",
        // headers: { "content-type": "application/x-www-form-urlencoded" },
        data: { ...infos }
      }).then(res => {
        this.$emit("reloadSelect");
        this.handleClose();
        console.log(res);
      });
    },
    getorgList(ableFundAccount=[]) {
      request({
        url: "/system/card/accoutTagList",
        method: "post",
        // headers: { "content-type": "application/x-www-form-urlencoded" },
        // data: Qs.stringify({
        //   category: this.category
        // })
      }).then(res => {
        console.log(res);
        let allOrganizations = res.data;
        let organizations = [];
        if (this.category === "1") {
          if (
            this.getInfoData.ableCurrntAccount &&
            this.getInfoData.ableCurrntAccount.length > 0
          ) {
            res.data.forEach((item,index) => {
              this.getInfoData.ableCurrntAccount.forEach(el => {
                if (item.id === el.accountTagId) {
                  organizations.push(item);
                  delete allOrganizations[index]
                }
              });
            });
          } else {
          organizations = [];
          allOrganizations = res.data;
          }

          this.allOrganizations = allOrganizations.filter(item => item);
          this.organizations = organizations;
        } else if (this.category === "2") {
          if (
            ableFundAccount &&
            ableFundAccount.length > 0
          ) {
            res.data.forEach((item,index) => {
              ableFundAccount.forEach(el => {
                if (item.id === el.accountTagId) {
                  organizations.push(item);
                  delete allOrganizations[index]
                }
              });
            });
          } else {
          organizations = [];
          allOrganizations = res.data;
          }

          this.allOrganizations = allOrganizations.filter(item => item);
          this.organizations = ableFundAccount;
        } else {
          return false;
        }
      });
    },
    //获取右边
    cardSelectDeptInfo(val) {
      return new Promise((resolve, reject) => {
        request({
          url: "/system/card/selectDeptInfo",
          method: "post",
          headers: { "content-type": "application/x-www-form-urlencoded" },
          data: Qs.stringify({
            deptId: val.deptId
          })
        }).then(res => {
          resolve(res.data);
        });
      });
    },

    async open(data) {
      console.log(data);
      this.val = data;
      this.category = "2";
      this.getInfoData = [];
      const ableFundAccount=await this.cardSelectDeptInfo(data.val);
      this.getorgList(ableFundAccount);

      this.dialogVisible = true;
    },
    updateKey() {
      this.$emit("update:keyIndex", new Date().getTime());
    },
    handleClose(done) {
      this.dialogVisible = false;
      this.updateKey();
    }
  }
};
</script>

<style lang="scss" scoped>
.el-dialog__wrapper {
  .dialog {
    width: 100%;
    height: 300px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    &-section {
      width: 230px;
      height: 100%;
      border: 1px solid rgba(212, 215, 225, 1);
      border-radius: 4px;

      .header-check {
        width: 100%;
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid rgba(212, 215, 225, 1);
        padding: 0 10px;
      }

      .main-check {
        width: 100%;
        height: calc(100% - 40px);
        padding: 0 10px;
        overflow-y: auto;

        /deep/ .el-checkbox-group {
          display: flex;
          flex-direction: column;

          .el-checkbox {
            margin: 10px 0;
            width: 100%;
            display: flex;
            align-items: center;

            .el-checkbox__label {
              width: 100%;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
          }
        }
      }
    }

    &-center {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .el-button {
        margin: 10px 0;
      }
    }
  }

  .dialog-footer {
    display: flex;
    justify-content: center;
  }
}
</style>
